<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <canvas id="rect" width="1000" , height="500" style="margin: 100px;"></canvas>
  <script src="../utils/index.js"></script>
  <script>
    const canvas = document.getElementById('rect')
    const ctx = canvas.getContext('2d')
    // console.log(Lrt.randomColor())
    init()

    const timerId = setInterval(() => {
      // 1. 清除画布
      ctx.clearRect(0, 0, canvas.width, canvas.height)
      drawRect(Lrt.randomColor3())
      // 2. 画坐标轴
      drawCoordinateAxis()
      // 3. 生成多个柱形
      drawBars(13)
    }, 1000);

    function init() {
      drawCoordinateAxis()
      drawBars(13)
    }

    function drawBars(count) {
      for (let i = 0; i < count; i++) {
        drawBar(130 + 60 * i, 400 * Math.random(), 30)
      }
    }
    // 封装坐标轴绘制函数
    function drawCoordinateAxis() {
      ctx.beginPath()
      ctx.moveTo(100, 0)
      ctx.lineTo(100, 400)
      ctx.lineTo(900, 400)
      ctx.stroke()
      ctx.closePath()
    }
    // 封装矩形绘制函数
    function drawBar(x, y, w) {
      ctx.beginPath()
      ctx.rect(x, y, w, 400 - y)
      ctx.fillStyle = Lrt.randomColor1()
      ctx.fill()
      ctx.strokeStyle = Lrt.randomColor1()
      ctx.stroke()
      ctx.closePath()
    }
    // console.log(Lrt.randomColor3())
    // 停止定时器
    setTimeout(() => {
      clearInterval(timerId)
    }, 60 * 10000);

    function drawRect(color) {
      ctx.beginPath()
      ctx.fillStyle = color
      ctx.fillRect(0, 10, 50, 30)
    }
  </script>
</body>

</html>